<template>
  <view class="history">
      <view class="title">
        <h5>搜索历史</h5>
        <view v-if="isDeleteShow">
            <span @click="$emit('delAll')">全部删除</span>
            <span @click="isDeleteShow = false">完成</span>
          </view>
        <a v-else @click="isDeleteShow = true"><i class="iconfont icon-shanchu2" ></i></a>
      </view>
      <ul>
        <li v-for="(history) in searchHistories" :key="history.id" @click="$emit('onSearch',history.keywords|| history )">
          <view>
            <i class="iconfont icon-lishi" ></i>
            <a >{{ history.keywords || history }}</a>
          </view>
          <i v-show="isDeleteShow" class="iconfont icon-cha" @click="$emit('onClickDelHistory', history.id)"></i>
        </li>
      </ul>
    </view>
</template>

<script>
export default {
  name: 'search-history',
  components: {},
  props: {
    searchHistories: {
      type: Array,
      required: true,
      default: () => { return [] }
    }
  },
  data () {
    return {
      isDeleteShow: false
    }
  }
}
</script>
<style lang="scss" scoped>
.history{
  .title{
  color: rgb(207, 200, 200);
  h5{
    margin: 0;
    font-weight: 400;
    font-size:16px;
  }
  span{
    font-size:14px;
    margin-left: 12px;
  }
  .icon-shanchu2{font-size:16px;}
  }
  view {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  ul {
    // overflow: hidden;
    padding: 0;
    li {
      padding:  5px 0px;
      font-size:16px;
      line-height:30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .icon-lishi{
    color: rgb(207, 200, 200);
      margin-right:5px;
      font-size: 16px;
  }
  .icon-cha{
    color: rgb(207, 200, 200);
    font-size: 12px;
  }

}

</style>
